<template>
	<view class="menu" :style="{height: height + 'px'}">
		<view class="items flex-row">
			<view @tap="chooseImage" class="item flex-column">
				<view class="icon flex-column">
					<text class="iconfont icon-album"></text>
				</view>
				<view class="text">相册</view>
			</view>
			<view @tap="camera" class="item flex-column">
				<view class="icon flex-column">
					<text class="iconfont icon-camera"></text>
				</view>
				<view class="text">相机</view>
			</view>
			<view @tap="showGoodsModal" class="item flex-column">
				<view class="icon flex-column">
					<text class="iconfont icon-goods"></text>
				</view>
				<view class="text">商品</view>
			</view>
			<view @tap="showOrderModal" class="item flex-column">
				<view class="icon flex-column">
					<text class="iconfont icon-order"></text>
				</view>
				<view class="text">订单</view>
			</view>
		</view>
		<view class="items flex-row">
			<view @tap="showMsgModal" class="item flex-column">
				<view class="icon flex-column">
					<text class="iconfont icon-msg"></text>
				</view>
				<view class="text">留言</view>
			</view>
			<view class="item flex-column">
				<view class="icon placeholder flex-column"></view>
				<view class="text"></view>
			</view>
			<view class="item flex-column">
				<view class="icon placeholder flex-column"></view>
				<view class="text"></view>
			</view>
			<view class="item flex-column">
				<view class="icon placeholder flex-column"></view>
				<view class="text"></view>
			</view>
		</view>
		
		<!--商品弹窗-->
		<GoodsModal @send="sendGoods" ref="goodsRef" />
		
		<!--订单弹窗-->
		<OrderModal @send="sendOrder" ref="orderRef" />
		
		<!--留言弹窗-->
		<MsgModal @send="sendOrder" ref="msgRef" />
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import GoodsModal from './goods.vue'
import OrderModal from './order.vue'
import MsgModal from './msg.vue'
import XBCCS from 'xbccs'
	
const emit = defineEmits(['success'])
const goodsRef = ref(null)
const orderRef = ref(null)
const msgRef = ref(null)
const commentRef = ref(null)
const height = computed(() => {
	return uni.getStorageSync('uni_keyboard_height') || 250
})

// 显示商品弹窗
function showGoodsModal(){
	goodsRef.value.open()
}

// 显示订单弹窗
function showOrderModal(){
	orderRef.value.open()
}

// 显示留言弹窗
function showMsgModal(){
	msgRef.value.open()
}

// 发送商品
function sendGoods(goods:any) {
	callback('goods', goods)
}

// 发送订单
function sendOrder(order:any) {
	callback('order', order)
}

// 拍照
function camera() {
	uni.chooseImage({
		sourceType: ['camera'],
		success(res) {
			uploadImage(res.tempFiles[0], res.tempFilePaths[0])
		}
	})
}

// 选择照片
function chooseImage() {
	uni.chooseImage({
		sourceType: ['album'],
		success(res) {
			uploadImage(res.tempFiles[0], res.tempFilePaths[0])
		}
	})
}

// 上传图片
function uploadImage(file: File, filePath: string){
	// 执行上传
	XBCCS.uploadImage({
		file,
		filePath,
		success: (uploadRes: any) => {
			callback('image', uploadRes)
		},
		fail: (err: any) => {
			uni.showToast({
				icon: 'none',
				title: res?.msg
			})
		}
	})
}

// 回调
function callback(type: string, data: object) {
	emit('success', { type, data })
}
</script>

<style lang="scss" scoped>
.menu {
	padding: 24rpx 0 0 50rpx;
	
	.items {
		justify-content: space-around;
		
		.item{
			margin: 0 50rpx 50rpx 0;
			
			.icon {
				background: #fff;
				border-radius: 10rpx;
				@include fullsize(120rpx);
				
				&.placeholder {
					background: transparent;
				}
			}
			
			.iconfont {
				color: #555;
				font-size: 68rpx;
			}
			
			.text {
				color: #666;
				height: 40rpx;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
}
</style>